"use client"

import * as React from "react"

import { useMediaQuery } from "~/hooks/use-media-query"
import { Button } from "~/registry/default/ui/button"
import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
   CommandList,
} from "~/registry/default/ui/command"
import {
   Drawer,
   DrawerContent,
   DrawerTrigger,
} from "~/registry/default/ui/drawer"
import {
   Popover,
   PopoverContent,
   PopoverTrigger,
} from "~/registry/default/ui/popover"

interface Status {
   value: string
   label: string
}

const statuses: Status[] = [
   {
      value: "backlog",
      label: "Backlog",
   },
   {
      value: "todo",
      label: "Todo",
   },
   {
      value: "in progress",
      label: "In Progress",
   },
   {
      value: "done",
      label: "Done",
   },
   {
      value: "canceled",
      label: "Canceled",
   },
]

export default function ComboBoxResponsive() {
   const [open, setOpen] = React.useState(false)
   const isDesktop = useMediaQuery("(min-width: 768px)")
   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
      null,
   )

   if (isDesktop) {
      return (
         <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
               <Button variant="outline" className="w-[150px] justify-start">
                  {selectedStatus ? (
                     <>{selectedStatus.label}</>
                  ) : (
                     <>+ Set status</>
                  )}
               </Button>
            </PopoverTrigger>
            <PopoverContent className="w-[200px] p-0" align="start">
               <StatusList
                  setOpen={setOpen}
                  setSelectedStatus={setSelectedStatus}
               />
            </PopoverContent>
         </Popover>
      )
   }

   return (
      <Drawer open={open} onOpenChange={setOpen}>
         <DrawerTrigger asChild>
            <Button variant="outline" className="w-[150px] justify-start">
               {selectedStatus ? (
                  <>{selectedStatus.label}</>
               ) : (
                  <>+ Set status</>
               )}
            </Button>
         </DrawerTrigger>
         <DrawerContent>
            <div className="mt-4 border-t">
               <StatusList
                  setOpen={setOpen}
                  setSelectedStatus={setSelectedStatus}
               />
            </div>
         </DrawerContent>
      </Drawer>
   )
}

function StatusList({
   setOpen,
   setSelectedStatus,
}: {
   setOpen: (open: boolean) => void
   setSelectedStatus: (status: Status | null) => void
}) {
   return (
      <Command>
         <CommandInput placeholder="Filter status..." />
         <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup>
               {statuses.map((status) => (
                  <CommandItem
                     key={status.value}
                     value={status.value}
                     onSelect={(value) => {
                        setSelectedStatus(
                           statuses.find(
                              (priority) => priority.value === value,
                           ) || null,
                        )
                        setOpen(false)
                     }}
                  >
                     {status.label}
                  </CommandItem>
               ))}
            </CommandGroup>
         </CommandList>
      </Command>
   )
}
